<template>

  <el-dialog :title="form.id ? '编辑职业' : '新增职业'" style="width: 324px;" modal-class="dialog-add" v-model="dialogVisible"
    @close="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" :rules="formRules">
      <el-form-item label="名称" prop="title"><el-input maxlength="30" v-model="form.title"
          placeholder="请输入"></el-input></el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="onSubmit" :loading="loading">保存</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import PositionApi from '@/api/position.js';
export default {
  data() {
    return {
      /*左边长度*/
      formLabelWidth: '120px',
      /*是否显示*/
      loading: false,
      /*是否显示*/
      dialogVisible: true,
      /*form表单对象*/
      form: {
        title: '',
        id: ''
      },
      /*form验证*/
      formRules: {
        title: [
          {
            required: true,
            message: ' ',
            trigger: 'blur'
          }
        ],
      }
    };
  },
  props: ['title'],
  watch: {
    title: function () {
      this.$nextTick(() => {
        this.form.title = this.title;
      })
    },
  },
  created() { },
  methods: {
    setTitle({ title, id }) {
      this.form.title = title;
      this.form.id = id;
    },
    /*添加*/
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let self = this;
          self.loading = true;
          let params = self.form;
          let key = 'careerStoreAdd'
          let msg = '新增成功'
          if (self.form.id) {
            key = 'careerStoreUpdate'
            msg = '编辑成功'
          }
          PositionApi[key](params, true)
            .then(data => {
              self.loading = false;
              ElMessage({
                message: msg,
                type: 'success'
              });
              self.dialogFormVisible(true);
            })
            .catch(error => {
              self.loading = false;
            });
        }
      });
    },

    /*关闭弹窗*/
    dialogFormVisible(e) {
      if (e) {
        this.$emit('close', {
          type: 'success',
          openDialog: false
        });
      } else {
        this.$emit('close', {
          type: 'error',
          openDialog: false
        });
      }
    }
  }
};
</script>
